<template>
  <!-- 基础属性信息 -->
  <div class="result-box">
    <el-tabs type="border-card" v-model="state.activeName">
      <el-tab-pane label="基本信息" name="first">
        <div class="base-box">
          <!-- 基础属性信息 -->
          <el-table
            :data="state.baseAttributeInfo"
            border
            style="width: 100%"
            :show-header="false"
            :cell-style="columnStyle"
          >
            <el-table-column prop="name1" />
            <el-table-column prop />
            <el-table-column prop="name2" />
            <el-table-column prop />
            <el-table-column prop="name3" />
            <el-table-column prop />
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="防洪指标信息" name="second">
        <el-table
          :data="state.floodControlInfo"
          border
          style="width: 100%"
          :show-header="false"
          :cell-style="columnStyle"
          :span-method="arraySpanMethod"
        >
          <el-table-column prop="name1" />
          <el-table-column prop />
          <el-table-column prop="name2" />
          <el-table-column prop />
          <el-table-column prop="name3" />
          <el-table-column prop />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="水位流量关系曲线" name="third" lazy>
        <div class="my-echarts">
          <baseInfoCharts height="100%" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup>
import { reactive, nextTick } from 'vue'

import baseInfoCharts from '@/components/app-echart/base-info-charts.vue'
const state = reactive({
  activeName: 'first',
  // 基础属性信息
  baseAttributeInfo: [
    { name1: '测站名称', name2: '测站编码', name3: '站点类型' },
    { name1: '报汛等级', name2: '所在河流', name3: '所在水系' },
    { name1: '建站时间', name2: '始报时间', name3: '经纬度' },
    { name1: '所属政区', name2: '行政区划代码', name3: '详细地址' },
    { name1: '隶属行业单位', name2: '信息管理单位', name3: '交换管理单位' },
    { name1: '基面名称', name2: '基面高程', name3: '基面修正值' },
    { name1: '测站岸别', name2: '测站方位', name3: '至河口距离' },
    { name1: '集水面积', name2: '拼音码', name3: '启用标志' }
  ],
  // 防洪指标信息
  floodControlInfo: [
    { name1: '左堤高程', name2: '左堤高程', name3: '警戒水位' },
    { name1: '警戒流量', name2: '保证水位', name3: '保证流量' },
    { name1: '实测最高水位', name2: '实测最高水位出现时间', name3: '调查最高水位' },
    { name1: '调查最高水位出现时间', name2: '实测最大流量', name3: '实测最大流量出现时间' },
    { name1: '调查最大流量', name2: '调查最大流量出现时间', name3: '历史最大含沙量' },
    {
      name1: '历史最大含沙量出现时间',
      name2: '历史最大断面平均流速',
      name3: '历史最大断面平均流速出现时间'
    },
    { name1: '历史最低水位', name2: '历史最低水位出现时间', name3: '历史最小流量' },
    { name1: '历史最小流量出现时间', name2: '高水位预警值', name3: '大流量预警值' },
    { name1: '低水位预警值 ', name2: '小流量预警值', name3: '启动预报水位标准' },
    { name1: '启动预报流量标准', name2: '', name3: '' }
  ]
})

function columnStyle({ columnIndex }) {
  // 设置第一,二，三列的样式
  if (columnIndex === 0 || columnIndex === 2 || columnIndex === 4) {
    return { background: '#f3f6fc' }
  }
}
// 合并单元格
function arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  if (rowIndex === 9) {
    if (columnIndex === 1) {
      return [1, 5]
    }
  }
}
</script>
<style lang="less" scoped>
.result-box {
  width: 100%;
  height: 100%;
  .base-box {
    height: 100%;
    :deep(.el-table--fit) {
      height: 100%;
      .el-scrollbar__view {
        height: 100%;
      }
    }
  }
  .my-echarts {
    height: 100%;
  }
}
</style>
